<script setup>
import { searchGoods } from '@/api/goods'
import searchYourGoods from '@/assets/images/kesrtd.png'
const route = useRoute()
const state = reactive({
  keyword: '', //搜索的关键字
  orderBy: '', //排序的规则
  currPage: 1, //当前查询的页码
  pageSize: 10, //每页的条数
  totalPage: 0, //一共多少页
  loading: false, //是否正在加载数据中...
  goodsList: [], //当前的加载好的商品列表
  categoryId: route.query.categoryId,
  finished: false, //是否已经完成了，也就是说后面没有更多数据了
  refreshing:false,
})
const queryProducts = async () => {
  if (!state.keyword && !state.categoryId) return (state.loading = false)
  const { list, totalPage } = await searchGoods(
    state.currPage,
    state.keyword,
    state.orderBy,
    state.categoryId
  )
  state.goodsList = state.goodsList.concat(list) //合并商品列表
  state.totalPage = totalPage //给总页数赋值
  state.finished = state.currPage >= totalPage //如果当前页数已经大于总页数了，表示加载完成了。
  state.loading = false //搜索后把loading设置为false
}
const newSearchGoods = async () => {
  state.finished = false
  state.currPage = 1
  state.goodsList = []
  queryProducts()
}
//加载更多，也就是加载下一页的数据
const loadMoreGoods = async () => {
  if (state.currPage < state.totalPage) {
    state.currPage++
  }
  queryProducts()
}
const refreshGoods = async ()=>{
    state.refreshing=true;
    await newSearchGoods();
    state.refreshing=false;
}
const changeOrderBy = async ({name})=>{
    state.orderBy  =name;
    newSearchGoods();
}
</script>
<template>
  <NavBar>
    <template #title>
      <van-search v-model="state.keyword"></van-search>
    </template>
    <template #right>
      <van-button type="primary" size="small" @click="newSearchGoods">搜索</van-button>
    </template>
  </NavBar>
  <div class="products-wrapper">
    <van-tabs type="card" color="1BAEAE" @click="changeOrderBy">
        <van-tab title="推荐" name=""></van-tab>
        <van-tab title="新品" name="new"></van-tab>
        <van-tab title="价格" name="price"></van-tab>
    </van-tabs>
    <van-pull-refresh
      v-model="state.refreshing"
      @refresh="refreshGoods"
    >
      <van-list
        v-model:loading="state.loading"
        :finished="state.finished"
        finished-text="没有更多了"
        @load="loadMoreGoods"
        class="goods-list"
      >
        <div v-for="goods in state.goodsList" :key="goods.goodsId" class="goods-item">
          <img :src="addUrlPrefix(goods.goodsCoverImg)" class="goods-cover" />
          <div class="goods-info">
            <span class="goods-name">{{ goods.goodsName }}</span>
            <span class="goods-intro">{{ goods.goodsIntro }}</span>
            <span class="goods-price">{{ goods.sellingPrice }}</span>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>

    <div class="search-your-goods" v-show="state.goodsList.length === 0">
      <img :src="searchYourGoods" />
    </div>
  </div>
</template>
<style lang="less" scoped>
.products-wrapper {
  padding: 50px 0;
  .goods-item {
    display: flex;
    padding: 5px;
    .goods-cover {
      width: 120px;
      height: 120px;
    }
    .goods-info {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      padding: 5px;
      .goods-name {
        font-weight: 700;
      }
      .goods-price {
        color: @primary-color;
      }
    }
  }
  .search-your-goods {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 50%;
    }
  }
}
</style>
